<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>poetry 后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" type="image/ico" href="/images/logo.png"/>

    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layui/css/common.css" media="all">
    <link rel="stylesheet" href="/css/bly-icon.css" media="all">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="user/common::headerhtml"></div>
    <!--    <div th:replace="user/common::menuhtml"></div>-->
    <div class="layui-container">
        <!-- 内容主体区域 -->
        <div style="padding-top: 15px;color: #666666">
            <div class="layui-fluid">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">设置我的资料</div>
                            <div class="layui-card-body" pad15="">

                                <div class="layui-form" lay-filter="userInfo">
                                    <!--<div class="layui-form-item">
                                        <label class="layui-form-label">我的角色</label>
                                        <div class="layui-input-inline">
                                            <select name="role" lay-verify="">
                                                <option value="1" selected="">超级管理员</option>
                                                <option value="2" disabled="">普通管理员</option>
                                                <option value="3" disabled="">审核员</option>
                                                <option value="4" disabled="">编辑人员</option>
                                            </select>
                                            <div class="layui-unselect layui-form-select">
                                                <div class="layui-select-title"><input type="text" placeholder="请选择"
                                                                                       value="超级管理员" readonly=""
                                                                                       class="layui-input layui-unselect"><i
                                                        class="layui-edge"></i></div>
                                                <dl class="layui-anim layui-anim-upbit">
                                                    <dd lay-value="1" class="layui-this">超级管理员</dd>
                                                    <dd lay-value="2" class=" layui-disabled">普通管理员</dd>
                                                    <dd lay-value="3" class=" layui-disabled">审核员</dd>
                                                    <dd lay-value="4" class=" layui-disabled">编辑人员</dd>
                                                </dl>
                                            </div>
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">当前角色不可更改为其它角色</div>
                                    </div>-->
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">用户名</label>
                                        <div class="layui-input-inline">
                                            <input type="hidden" name="id" lay-verify="id">
                                            <input type="text" name="userName" lay-verify="userName" disabled="disabled"
                                                   class="layui-input">
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">不可修改。一般用于后台登陆</div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">昵称</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="nickName" lay-verify="nickName" autocomplete="off"
                                                   placeholder="请输入昵称" class="layui-input">
                                        </div>
                                    </div>
                                    <!--<div class="layui-form-item">
                                        <label class="layui-form-label">性别</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="sex" value="男" title="男">
                                            <div class="layui-unselect layui-form-radio"><i
                                                    class="layui-anim layui-icon"></i>
                                                <div>男</div>
                                            </div>
                                            <input type="radio" name="sex" value="女" title="女" checked="">
                                            <div class="layui-unselect layui-form-radio layui-form-radioed"><i
                                                    class="layui-anim layui-icon"></i>
                                                <div>女</div>
                                            </div>
                                        </div>
                                    </div>-->
                                    <!--<div class="layui-form-item">
                                        <label class="layui-form-label">头像</label>
                                        <div class="layui-input-inline">
                                            <input type="hidden" name="imgUrl" lay-verify="imgUrl" id="LAY_avatarSrc"
                                                   placeholder="图片地址" value="http://cdn.layui.com/avatar/168.jpg"
                                                   class="layui-input">
                                            <img id="lay_avatarImgUrl" src="/img/hero-img.png"
                                                 style="width: 150px;height: 150px"/>
                                        </div>
                                        <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                            <button type="button" class="layui-btn layui-btn-primary"
                                                    id="LAY_avatarUpload">
                                                <i class="layui-icon"></i>上传图片
                                            </button>
                                            <input class="layui-upload-file" type="file" accept="" name="file">
                                            <button class="layui-btn layui-btn-primary" layadmin-event="avartatPreview">
                                                查看图片
                                            </button>
                                        </div>
                                    </div>-->

                                    <!--<div class="layui-form-item">
                                        <label class="layui-form-label">手机</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="cellphone" value="" lay-verify="phone"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">邮箱</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="email" value="" lay-verify="email"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>-->
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">选择头像</label>
                                        <!-- <div class="layui-input-block">
                                             <input type="text" name="imgUrl" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                                                    autocomplete="off" class="layui-input">
                                         </div>-->
                                        <div class="layui-upload-drag" id="test10">
                                            <i class="layui-icon"></i>
                                            <p>上传头像，或将文件拖拽到此处</p>
                                            <div class="layui-hide" id="uploadDemoView">
                                                <hr>
                                                <input type="hidden" id="imgUrl" name="imgUrl" value="">
                                                <img src="" name="" alt="上传成功后渲染" style="max-width: 196px">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit="" data-type="submitUser">确认修改</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div th:replace="user/common::footerhtml"></div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/layui/menu.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['element', 'table', 'laydate', 'form', 'upload'], function () {
        var element = layui.element,
            table = layui.table,
            form = layui.form,
            upload = layui.upload,
            laydate = layui.laydate;
        var $ = layui.$;

        //拖拽上传
        upload.render({
            elem: '#test10'
            , url: '/upload/imgUpLoad' //改成您自己的上传接口
            , field: 'editormd-image-file'
            , done: function (res) {
                if (res.success != 1) {
                    layer.alert(res.msg, {icon: 5});
                    return;
                }
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.url);
                layui.$("#imgUrl").val(res.url);
                console.log(res)
            }
        });
        $.ajax({
            url: '/user/getUser',
            type: 'POST',
            dataType: 'json',
            success: function (obj) {
                console.log(obj);
                if (obj.status != 200) {
                    layui.msg("获取用户信息失败！", {icon: 5});
                }
                obj.data.imgUrl = '..' + obj.data.imgUrl;
                form.val('userInfo', obj.data);
                $("#lay_avatarImgUrl").src = obj.data.imgUrl;
            }, error: function () {
                layui.msg('系统故障', {icon: 5});
            }
        });

        var active = {
            submitUser: function () {
                var data = form.val('userInfo');
                $.ajax({
                    url: '../user/save',
                    type: 'post',
                    dataType: 'json',
                    data: data,
                    success: function (result) {
                        if (result.status !== 200) {
                            layer.alert(result.msg);
                            return;
                        }
                        layer.closeAll();
                        layer.alert("保存成功");

                    }
                });
            },
        }
        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>